<template>
  <div class="goods">
    <div class="flexCenter img">
      <img
        lazy-load
        :src="goodData && goodData.mainImg ? utils.baseUrl + goodData.mainImg : ''"
        alt=""
      />
    </div>
    <div class="goodsContent flexDirection">
      <div class="flex" style="margin-bottom: 8rpx; font-size: 500; align-items: center">
        <span v-if="goodData?.boolGift == '1'" class="compTips iconfont icon-zengpin2"></span>
        {{ goodData?.productName }}
      </div>
      <div class="flex property">
        <template v-for="(item, index) in goodData?.productPropertyList" :key="index">
          <div style="font-size: 22rpx; color: #999" v-if="item.propertyValue">
            {{ item.propertyValue }}
          </div>
        </template>
      </div>
      <div class="price" style="color: #eb3a35">
        <label>￥</label>
        <label class="priceNum"> {{ utils.ThousandAndDecimal(goodData?.vipPrice) }}</label>
        <label style="margin-left: 4rpx">会员价</label>
      </div>
      <div class="price">
        <label>￥</label>
        <label class="priceNum"> {{ utils.ThousandAndDecimal(goodData?.marketPrice) }}</label>
        <label style="margin-left: 4rpx">市场价</label>
        <div v-if="showNum" style="color: #666; font-size: 30rpx; position: absolute; right: 0">
          <span style="font-size: 20rpx">X</span> {{ goodData.productNum }}
        </div>
      </div>
      <div class="tips" v-if="goodData?.productGiftList?.length > 0 && showComp">
        赠品：
        <template v-for="(item1, index) in goodData?.productGiftList" :key="index">
          {{ item1.productName }}{{ index < goodData.productGiftList.length - 1 ? "/" : "" }}
        </template>
      </div>
      <div class="comp" v-if="goodData?.productGiftList?.length > 0 && isShowSheet">
        <div style="flex: 1" class="imgs">
          <scroll-view scroll-x style="width: 100%; white-space: nowrap">
            <template v-for="(item1, index) in goodData?.productGiftList" :key="index">
              <img
                lazy-load
                :src="utils.baseUrl + item1.mainImg"
                alt=""
                @click.stop="
                  utils.previewImage({
                    urls: [utils.baseUrl + item1.mainImg],
                  })
                "
              />
            </template>
          </scroll-view>
        </div>
        <div class="right" @click.stop="showSheet = true">
          赠品 x{{ goodData?.productGiftList?.length
          }}<van-icon name="arrow" style="transform: translateY(2rpx)"></van-icon>
        </div>
      </div>
    </div>
    <div class="stepper" @click.stop>
      <template v-if="showStep">
        <van-stepper
          :value="goodData.productNum"
          min="1"
          max="1000"
          integer
          @plus="
            () => {
              changeNum(++goodData.productNum);
            }
          "
          @minus="
            () => {
              changeNum(--goodData.productNum);
            }
          "
          @blur="(e:any)=>{changeNum(e.detail.value)}"
        />
      </template>
    </div>
  </div>
  <van-action-sheet :show="showSheet" title="赠品清单" @close="close">
    <div class="sheet">
      <div class="flex" v-for="(item, index) in goodData?.productGiftList" :key="index">
        <div class="flexCenter img">
          <img :src="utils.baseUrl + item?.mainImg" alt="" />
        </div>
        <div>
          <div class="name">{{ item?.productName }}</div>
          <div class="number">{{ item?.sortNum + item?.unitName }}</div>
        </div>
      </div>
    </div>
  </van-action-sheet>
</template>

<script setup lang="ts" name="GoodsComponent">
import utils from "@/utils";
import { ref } from "vue";

const prop = defineProps({
  isShowSheet: {
    type: Boolean,
    default: false,
  },
  isShow: {
    type: Boolean,
    default: true,
  },
  text: {
    type: String,
    default: "暂无数据",
  },
  goodData: {
    type: Object as any,
    default: {},
  },
  showStep: {
    type: Boolean,
    default: true,
  },
  /**
   * 显示数量
   */
  showNum: {
    type: Boolean,
    default: false,
  },
  /**
   * 显示赠品
   */
  showComp: {
    type: Boolean,
    default: true,
  },
});
const showSheet = ref(false);
const close = () => {
  showSheet.value = false;
};
const emit = defineEmits(["changeNum"]);
// 修改数量
const changeNum = (num: number) => {
  emit("changeNum", num);
};
</script>

<style lang="less" scoped>
.sheet {
  min-height: 50vh;
  .flex {
    padding: 28rpx;
    margin-bottom: 20rpx;

    .number {
      margin-top: 20rpx;
      color: #666;
      font-size: 22rpx;
    }
  }
}
.img {
  margin-right: 20rpx;
  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
  }
}
.goods {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;

  .goodsContent {
    flex: 1;
    font-size: 30rpx;

    .flex {
      view {
        margin-right: 20rpx;
      }
    }
    .tips {
      width: 60%;
      margin-top: 6rpx;
      font-size: 22rpx;
      color: #eb3a35;
      font-weight: 500;
    }
    .compTips {
      // padding: 2rpx 12rpx;
      // margin-left: 10rpx;
      // border-radius: 10px;
      // font-weight: 500;
      // font-size: 20rpx;
      // color: #fff;
      // background: #eb3a35;
      // white-space: nowrap;
      margin-right: 10rpx;
      color: #eb3a35;
    }
    .comp {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      .imgs {
        width: 50vw;
        image {
          display: inline-block;
          width: 60rpx;
          height: 60rpx;
          border-radius: 10rpx;
          margin-right: 10rpx;
        }
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        white-space: nowrap;
        color: #666;
      }
    }
  }
  .property {
    flex-wrap: wrap;
    margin-bottom: 8rpx;
  }
  .price {
    flex: 1;
    display: flex;
    position: relative;
    align-items: flex-end;

    font-weight: 500;
    line-height: unset;
    label {
      font-size: 22rpx;
    }
    .priceNum {
      font-size: 30rpx;
      transform: translateY(2rpx);
      font-weight: 500;
    }
  }
  .stepper {
    position: absolute;
    bottom: 0rpx;
    right: 0rpx;
    z-index: 99;
  }
}
</style>
